<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/js游戏.css">
</head>

<body>
    <div class="all">
        <div class="jp">
            <div class="shang">
                <div class="s-1 box1 fl">
                    <p>上</p>
                </div>
            </div>
            <div class="zhong">
                <div class="z-1 box1 fl">
                    <p>左</p>
                </div>
                <div class="z-2 box1 fl">
                    <p>右</p>
                </div>
            </div>
            <div class="xia ">
                <div class="x-1 box1 fl">
                    <p>下</p>
                </div>
            </div>
        </div>
        <div class="ydfk">
            <img src="" alt="">
        </div>
        

    </div>


    <script src="../JS/jquery-3.1.0.min.js"></script>
    <script>
      var s=document.querySelector(".s-1");
      var z=document.querySelector(".z-1");
      var z1=document.querySelector(".z-2");
      var x=document.querySelector(".x-1");
      var div=document.querySelector(".ydfk");
        $('.s-1').click(function(){
            $('.ydfk').css({
                'mangin-top':'-100px'

            })
        });

        $('.s-1').click(function(){
            $('.ydfk').css('mangin-top')-100+'px'
        });
        $('.z').click(function(){
            $('.ydfk').css('mangin-left')+100+'px'
        });
        $('.z-1').click(function(){
            $('.ydfk').css('mangin-right')-100+'px'  
        });
        
        $('.x').click(function(){
            $('.ydfk').css('mangin-bottom')-100+'px'
        });

    </script>
</body>

</html>